<template>
    <div>
        <h1 style="text-align: center;">注册</h1>
        <van-form @submit="onSubmit">
        <van-field
            v-model="username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="rules.username"
        />
        <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="rules.password"
        />
        <van-field
            v-model="repass"
            type="password"
            name="repass"
            label="确认密码"
            placeholder="确认密码"
            :rules="rules.repass"
        />
        <van-field
            v-model="email"
            name="email"
            label="邮箱"
            placeholder="邮箱"
            :rules="rules.email"
        />
        <van-field
            v-model="tel"
            name="tel"
            label="手机号"
            placeholder="手机号"
            :rules="rules.tel"
        />
        
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
        </van-form>
        <div @click="onclick" class="zc">以有账号,去登录</div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Form } from 'vant';
import { Field } from 'vant';
import { Toast } from 'vant';
import axios from 'axios'


Vue.use(Toast);
Vue.use(Form);
Vue.use(Field);
export default {
     data () {
        return {
            rules: {
                username: [
                    { required: true, message: '请填写用户名' }
                ],
                password: [
                    { required: true, message: '请填写密码' }
                ],
                repass: [
                    { required: true, message: '请再次填写密码' }
                ],
                email: [
                    {pattern: /^([1-9]\d{4,9}@qq\.com|[a-zA-Z]\w{5,17}@((126|163)\.com|yeah\.net))$/, message: '请输入正确的邮箱'}
                ],
                tel: [
                    {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号'}
                ]
            },
            username: '',
            password: '',
            repass: '',
            tel: '',
            email: ''
        }
    },
    methods: {
        onSubmit(values) {
            // console.log(values);
            let username = values.username
            let password = values.password
            let email = values.email
            let tel = values.tel
            delete values.repass
            axios({
                method:'post',
                data:{
                    username,
                    password
                },
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                url: '/front/register',
                //表单中 输入的值
                data: {
                username,
                password,
                email,
                tel
            }
            }).then(res =>{
                let {error_code, msg} = res
                console.log(res);
                if  (error_code === 200){
                    Toast.success(msg)
                    this.$router.push('/login')
                }
                Toast.fail(msg)
            })

        },
        onclick(){
            this.$router.push('/login')
        }
    }
}
</script>

<style>
    .zc{
        margin-top: 10px;
        text-align: center;
    }
</style>
